<template>
  <view class="header">
    <view class="header-bg">
      <image src="/static/tesy.jpg" mode="aspectFill" class="bg-image" />
    </view>
  </view>

  <view class="container">
    <!-- 标题 -->
    <view class="all-function">
      <image class="wechat-icon" src="/static/wechat.png"></image>
      <view class="title">微信常用功能选择</view>
    </view>
    <!-- 功能网格 -->
    <view class="grid">
      <view class="function-btn" bindtap="videoCall">
        <image class="icon" src="/static/拨打电话.png" />
        <text class="label">拨打视频电话</text>
      </view>
      <view class="function-btn" bindtap="videoCall">
        <image class="icon" src="/static/消息.png" />
        <text class="label">发送消息</text>
      </view>
      <view class="function-btn" bindtap="videoCall">
        <image class="icon" src="/static/联系人.png" />
        <text class="label">寻找联系人</text>
      </view>
      <view class="function-btn" bindtap="videoCall">
        <image class="icon" src="/static/收款码.png" />
        <text class="label">显示收款码</text>
      </view>
      <!-- 其他按钮类似... -->
    </view>
  </view>


</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {},
  };
</script>

<style lang="scss">
  .header {
    height: 500rpx;
    /* 根据图片比例调整 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30rpx 40rpx;
    /* 四周留白 左为上下 右为左右 */

    &-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      border-radius: 20rpx;
      /* 可选圆角 */

      .bg-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
      }
    }
  }

  /*以上style代码为功能背景图片的格式*/

  /* 容器样式 */
  .container {
    padding: 30rpx;
    background-color: #f5f5f5;
  }

  .all-function {
    display: flex;
    /* 关键：启用横向布局 */
    align-items: center;
    /* 垂直居中 */
    gap: 20rpx;
    /* 图标和标题间距 */
    margin-left: 30rpx;
    /*padding: 30rpx 0;
    /* 按需调整内边距 */
  }

  .wechat-icon {
    width: 110rpx;
    height: 110rpx;

  }

  .title {
    font-size: 60rpx;
    /* 调整字号避免换行 */
    color: #333;
    font-weight: bold;
    /* 移除原有 padding */
    white-space: nowrap;
    /* 防止标题换行 */
  }

  /*以上为“微信常用功能选择”的样式*/

  /* 网格布局 */
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;
    margin-bottom: 40rpx;
  }

  /* 单独定义子元素样式 */
  .grid .function-btn {
    /* 建议增加功能按钮容器 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .grid image {
    width: 150rpx;
    height: 150rpx;
    /* margin-left: 60rpx; */
    /* 如果不需要特殊偏移建议移除 */
    display: block;
    /* 确保图片独立成块 */
    margin-bottom: 20rpx;
    /* 增加图文间距 */
  }

  .grid text {
    width: auto;
    /* 文字不需要固定宽度 */
    height: auto;
    font-size: 40rpx;
    font-weight: bold;
    /* 需要指定文字大小 */
    color: #333;
  }

  .bottom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
  }

  .function-btn {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    text-align: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }

  .icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 16rpx;
  }

  .label {
    font-size: 28rpx;
    color: #333;
  }
</style>